<template>
  <div class="profile">
    <div class="profile-header">
      <div class="avatar">
        <el-avatar 
          :size="120" 
          :src="profileInfo.avatar" 
          @error="() => true"
        >
          <el-icon :size="60"><UserFilled /></el-icon>
        </el-avatar>
      </div>
      <h2>{{ profileInfo.nickname || profileInfo.username }}</h2>
    </div>

    <div class="profile-content">
      <div class="profile-section">
        <h3>个人资料</h3>
        <el-form 
          ref="formRef"
          :model="profileForm"
          :rules="rules"
          label-width="80px"
          class="profile-form"
          v-loading="loading"
        >
          <el-form-item label="昵称" prop="nickname">
            <el-input v-model="profileForm.nickname" placeholder="请输入昵称" />
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="profileForm.phone" placeholder="请输入手机号" />
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="profileForm.email" placeholder="请输入邮箱" />
          </el-form-item>
          <el-form-item label="头像" prop="avatar">
            <el-input v-model="profileForm.avatar" placeholder="请输入头像URL" />
          </el-form-item>
          <el-form-item>
            <el-button 
              type="primary" 
              @click="handleUpdateProfile"
              :loading="submitting"
            >
              保存修改
            </el-button>
          </el-form-item>
        </el-form>
      </div>

      <div class="profile-section">
        <h3>账号信息</h3>
        <div class="info-list">
          <div class="info-item">
            <span class="label">用户名</span>
            <span class="value">{{ profileInfo.username }}</span>
          </div>
          <div class="info-item">
            <span class="label">角色</span>
            <span class="value">{{ profileInfo.role === 'USER' ? '普通用户' : '管理员' }}</span>
          </div>
          <div class="info-item">
            <span class="label">注册时间</span>
            <span class="value">{{ formatDate(profileInfo.createdTime) }}</span>
          </div>
          <div class="info-item">
            <span class="label">最后更新</span>
            <span class="value">{{ formatDate(profileInfo.updatedTime) }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useProfile } from '@/ts/pages/profile'
import '@/css/pages/profile.css'
import { UserFilled } from '@element-plus/icons-vue'

const { 
  profileInfo, 
  profileForm, 
  loading,
  submitting,
  handleUpdateProfile,
  formatDate 
} = useProfile()

// 表单验证规则
const rules = {
  nickname: [
    { required: true, message: '请输入昵称', trigger: 'blur' },
    { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
  ],
  phone: [
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
  ],
  email: [
    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
  ]
}
</script> 